<template>
  <div class="tixian_box">
    <ul class="tixian_ul geren_ul">
      <li class="tixian_li">
        <span>银行卡号</span>
        <input type="number" v-model="kahao" placeholder="请填写银行卡号" />
      </li>
      <li class="tixian_li">
        <span>银行名称</span>
        <input type="text" v-model="xingming" placeholder="请填写银行名称" />
      </li>
      <li class="tixian_li">
        <span>持卡人</span>
        <input type="text" v-model="kaihu" placeholder="请填写持卡人" />
      </li>
    </ul>
    <button class="red_btn" @click="tijiao_btn">确认提交</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      kahao: "", //请填写银行卡号
      xingming: "", //请填写银行名称
      kaihu: "" //请填写开户名称
    };
  },
  //   渲染之前
  created() {
    //   get提交
    this.http.get("/api/member/info").then(res => {
      if (res.status_code == 200) {
        (this.kahao = res.data.card_num),
          (this.xingming = res.data.bank_name),
          (this.kaihu = res.data.open_bank_name);
      } else {
        this.$toast(res.message);
      }
    });
  },
  methods: {
    // 银行卡提交
    async tijiao_btn() {
      // 判断未填写
      if (!this.kahao || !this.xingming || !this.kaihu) {
        // 提示填写
        this.$toast("请输入完善信息");
        return;
      }
      // 对接口
      try {
        let res = await this.http.post("/api/bank/info", {
          // 对字段
          card_num: this.kahao,
          bank_name: this.xingming,
          open_bank_name: this.kaihu
        });

        if (res.status_code === 200) {
          // 成功
          this.$toast(res.message);
          console.log(2222);
          this.$router.back();
        } else {
          this.$toast(res.message);
        }
      } catch (error) {
        // this.$toasted.error(res.message, { icon: "error" }).goAway(2000);
      }
    }
  }
};
</script>

<style>
@import url("../../assets/css/ttcp/chongzhi.css");
.tixian_box {
  background-color: #f2f2f2;
  height: 100vh;
}
</style>